<template>
  <div>
    <el-container>
      <!--头部区-->
      <el-header style="height:100px">
        <diV class="header_title">
          <!--                <img src="../assets/img/drop.png"  id="home_header_logo">-->
          <span>电商隐私保护系统</span>
        </diV>
        <div>
          <el-select v-model="select_value" placeholder="个人中心" size="mini" :change="judgeOption()">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-header>
      <el-container>
        <el-aside>
          <el-menu :router="true">
            <el-submenu index="1">
              <template slot="title">
                <span>电商用户端</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="uploadreceiveinfo">地址上链</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item index="expressquery">快递查询</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <span>快递总部端</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="expressaddressquery">地址查询</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item index="expressroute">快递路线设置</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <span>快递站点端</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="expressnext">下一站查询</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <span>电商平台端</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="uploadorderinfo">订单信息上链</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item index="expressquery">快递查询</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <span>电商商家端</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="uploadsendinfo">发货信息上链</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item index="expressquery">快递查询</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <div>
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>

    <el-dialog :visible.sync="changepassword_box_visible" width="30%">
      <div id="change_password_form">
        <h2 style="color:#06C;">修改密码</h2>
        <el-form :model="password_form"
                 :rules="password_form_rules" label-width="100px"
                 ref="password_form_ref" hide-required-asterisk>
          <el-form-item label="旧密码" prop="old_password">
            <el-input v-model="password_form.old_password" show-password></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="new_password">
            <el-input v-model="password_form.new_password" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="check_password">
            <el-input v-model="password_form.check_password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <div style="float:right">
              <el-button type="primary" plain @click="changePassword()">修改</el-button>
              <el-button type="primary" plain @click="changepassword_box_visible=false">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import {version} from 'echarts';

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.password_form.check_password !== '') {
          this.$refs.password_form_ref.validateField('check_password');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.password_form.new_password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      options: [{
        value: '选项1',
        label: '修改密码'
      }, {
        value: '选项2',
        label: '退出'
      }],
      select_value: '',
      changepassword_box_visible: false,

      password_form: {
        old_password: '',
        new_password: '',
        check_password: ''
      },

      password_form_rules: {
        old_password: [
          {required: true, message: '旧密码不能为空', trigger: 'blur'},
        ],
        new_password: [
          {validator: validatePass, trigger: 'blur'}
        ],
        check_password: [
          {validator: validatePass2, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    judgeOption: function () {
      if (this.select_value === '选项1') {
        this.changepassword_box_visible = true
        this.select_value = ''
      } else if (this.select_value === '选项2') {
        this.$confirm('是否确定退出？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          window.sessionStorage.clear()
          this.$router.push('/login')
        }).catch(() => {
        })
        this.select_value = ''
      }
    },
    changePassword() {
      var that = this
      this.$refs.password_form_ref.validate(async valid => {
        //console.log(valid);
        if (!valid) {//验证失败
          that.$message({
            message: '请完善表格信息',
            type: 'error'
          })
        } else {
          axios.put('http://101.133.174.112:8888/swg/user/modify', {
            uid: 1,
            pasword: this.password_form.old_password,
            opassword: this.password_form.new_password
          }).then(function (response) {
            var tmp = response.data.state
            if (tmp === 0) {
              that.$message({
                message: '旧密码错误',
                type: 'error'
              })
            } else {
              that.$message({
                message: '修改成功',
                type: 'success'
              })
              that.$router.push('/login')

            }
          }).catch(function (error) {
            console.log(error)
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.home_container {
  height: 100%;
}

.el-header {
  background-color: skyblue;
  position: relative;
  height: 75px;
  color: aliceblue;
}

.header_title {
  float: left;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 35px;
}

#home_header_logo {
  position: relative;
  width: 45px;
  height: 45px;
  top: 12px;
}

.el-aside {
  background-color: white;
}

.el-main {
  background-color: white;
}

h2 {
  text-align: center;
}

.ChangePasswordForm {
  width: 400px;
  height: 300px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-select {
  left: 84%;
  padding-top: 50px;
}
</style>